<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avatar_box">
				<img src="../assets/logo.png" alt="">
			</div>
			<!-- 登陆表单 -->
			<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login_form">
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input v-model='loginForm.username' prefix-icon='iconfont icon-user'></el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input type="password" v-model='loginForm.password' prefix-icon='iconfont icon-3702mima'></el-input>
				</el-form-item>
				<!-- 按钮 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登陆</el-button>
					<el-button type="info" @click="resetLoginForm">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			loginForm: {
				username: 'admin',
				password: '123456'
			},
			loginFormRules: {
				username: [
					{ required: true, message: "请输入用户名", trigger: "blur" }, 
					{ min: 3, max: 8, message: "长度在3-8个字符", trigger: "blur" }
				],
				password: [
					{ required: true, message: "请输入密码", trigger: "blur" },
					{ min: 6, max: 15, message: "长度在6-15个字符", trigger: "blur" }
				]
			}
		};
	},
	methods: {
		//点击重置
		resetLoginForm() {
			this.$refs.loginFormRef.resetFields();
		},
		login() {
			this.$refs.loginFormRef.validate(async valid => {
				//console.log(valid);
				if(!valid) return;
				const { data: res } = await this.$http.post('login', this.loginForm);
				//console.log(res);
				if(res.meta.status !== 200) {
					this.$message.error('登陆失败');
				}else{
					this.$message.success('登陆成功');
					window.sessionStorage.setItem('token',res.data.token);
					this.$router.push('/home');
				}				
			});
		}
	}
};
</script>

<style lang="less" scoped>
.login_container{
	background-color: #2b4b6b;
	height: 100%;
}
.login_box{
	width: 450px;
	height: 300px;
	background-color: #fff;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	
	.avatar_box {
		height: 130px;
		width: 130px;
		border: 1px solid #eee;
		border-radius: 50%;
		padding: 10px;
		box-shadow: 0 0 20px green;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #eee;
		}
	}
}
.btns{
	display: flex;
	justify-content: flex-end;
}
.login_form{
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}
</style>
